<template>
  <div class="safe-containner">
    <el-dialog title="查看策略" :visible.sync="dialogSafeLook">
      <el-form class="safelook" label-width="101px">
        <el-form-item label="安全策略名称:">
          <el-input class="lookInput" v-model="safeLookData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="设备&测点:">
          <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" v-model="safeLookData.equipment" readonly></el-input>
        </el-form-item>
        <el-form-item label="安全时段:">
          <el-input class="safeTimeTextarea" type="textarea" :autosize="{ minRows: 1, maxRows: 9}" v-model="safeLookData.safetime" readonly></el-input>
        </el-form-item>
        <el-form-item label="状态:" v-if="safeLookData.status === '启用'">
          <el-input class="lookInput enableColor" v-model="safeLookData.status" readonly></el-input>
        </el-form-item>
        <el-form-item label="状态:" v-if="safeLookData.status === '禁用'">
          <el-input class="lookInput disabledColor" v-model="safeLookData.status" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="dialogSafeEdit" title="编辑策略" :visible.sync="dialogSafeEdit">
      <el-form ref="form" label-width="80px">
        <span id="addNameSpan">*</span>
        <el-form-item class="editForm" label="策略名称:">
          <el-input class="editInput" v-model="editSafeName"></el-input>
        </el-form-item>
        <el-row class="editRow">
          <el-col class="editRowLeft" :span="8">
            <el-input class="leftInput" v-model="editSafeId" placeholder="输入关键字进行过滤"></el-input>
            <div class="grid-content bg-purple safeTimeTree">
              <el-tree
                :data="safeEditTreeData"
                :props="safeEditprops"
                show-checkbox
                node-key="resource_id"
                ref="tree"
                default-expand-all
                :filter-node-method="editFilterNode"
                @check-change="editSafeCheckChange">
              </el-tree>
            </div>
          </el-col>
          <el-col class="editRowRight" :span="16">
            <div>
              <el-table class="addSafeTable" :data="editSafeTime">
                <el-table-column class="tablePadding" width="435px" prop="name">
                  <template slot-scope="scope">
                    <span class="addSafeSpan" v-if="scope.$index === 0">*</span>
                    <div class="block">
                      <span class="demonstration">时段{{scope.$index + 1}}:</span>
                      <el-date-picker
                        v-model="editSafeTime[scope.$index].value"
                        class="timeInterval"
                        size="small"
                        type="datetimerange"
                        range-separator="至"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </div>
                    <!--<el-input v-model="addSafeTime[scope.$index].name"></el-input>-->
                  </template>
                </el-table-column>
                <el-table-column class="tablePadding">
                  <template  slot-scope="scope">
                    <el-button v-if="scope.$index < 8" class="tableIcon" title="添加" type="text" size="small" @click="editAddTime(scope.$index)"><i class="el-icon-plus"></i></el-button>
                    <el-button v-if="scope.$index > 0" class="tableIcon" title="删除" type="text" size="small" @click="editDeleteRow(scope.$index)"><i class="el-icon-minus"></i></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="notes">注: <span id="editAsterisk">*</span> 为必填项</div>
        <el-button class="clears" @click="dialogSafeEdit = false">取 消</el-button>
        <el-button class="bottonConfirm" type="primary" @click="editSafe">确 定</el-button>
      </div>
    </el-dialog>
    <div class="safeSearch">
      <header-search v-bind:deleteids="deleteids" v-on:addSafeName="addSafeName"></header-search>
    </div>
    <div class="safeTableList">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="540px"
        class="safeDisableDialog"
        style="margin-top: 20vh;">
        <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
          <img :src="disableIcon"/>
        </div>
        <span>确认禁用此策略</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="disableWork()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogEnable"
        width="540px"
        class="safeDisableDialog"
        style="margin-top: 20vh;">
        <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
          <img :src="enableIcon"/>
        </div>
        <span>确认启用此策略</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogEnable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="enableWork()">确 定</el-button>
        </span>
      </el-dialog>
      <el-table
        :data="safeListNeed"
        border
        stripe border fit highlight-current-row
        style="width: 100%;min-height: 500px;max-height: 500px;overflow-y: auto; "
        height="250"
        :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
        @selection-change="safeTimeChangeFun">
        <el-table-column type="selection" align="center" width="40" @selection-change="safeTimeChangeFun"></el-table-column>
        <el-table-column
          prop="index"
          align="center"
          label="序号"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          prop="status[0]"
          label="状态"
          width="65px"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status[0] === '启用' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.status[0]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="160px"
        >
          <template slot-scope="scope">
            <el-button class="tableIcon" title="查看" @click="lookDialog(scope.$index, scope.row)" type="text" size="small">
              <img :src="viewIcon"/>
            </el-button>
            <el-button class="tableIcon" title="编辑" @click="editDialog(scope.$index, scope.row)" type="text" size="small">
              <img :src="update"/>
            </el-button>
            <el-button class="tableIcon" title="删除" @click="deleteDialog(scope.$index, scope.row)" type="text" size="small">
              <img :src="deletes"/>
            </el-button>
            <!--<safe-delete-dialog></safe-delete-dialog>-->
            <span class="segmentingLine">|</span>
            <el-button v-if="scope.row.status[1] === '0'" @click="showEnable(scope.$index,scope.row)" class="tableIcon" title="启用" type="text" size="small">
              <img :src="enable"/>
            </el-button>
            <el-button v-if="scope.row.status[1] === '1'" @click="showDisable(scope.$index,scope.row)" class="tableIcon" title="禁用" type="text" size="small">
              <img :src="disable"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination
          @size-change="safeSizeChange"
          @current-change="safeCurrentChange"
          :current-page="ListQuery.page"
          :page-sizes="[5, 10, 20]"
          :page-size="ListQuery.limit"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import headerSearch from './components/headerSearch'

  import enable from '@/assets/reports/enable_normal.png'
  import disable from '@/assets/reports/disabled_normal.png'
  import deletes from '@/assets/reports/delete_normal.png'
  import remove from '@/assets/mSiteAdmin/remove.png'
  import update from '@/assets/reports/redact_normal.png'
  import viewIcon from '@/assets/reports/detail_normal.png'
  import disableIcon from '@/assets/mSiteAdmin/disable-icon.png'
  import enableIcon from '@/assets/mSiteAdmin/enable-icon.png'
  import axios from 'axios'
  export default {
    name: 'safeTime',
    components: { headerSearch },
    data() {
      return {
        dialogVisible: false,
        dialogEnable: false,
        testNumber: this.routerNeed,
        editSafeTime: [{ value: [''] }],
        editSafeName: '',
        editSafeTree: [],
        editSafeId: '',
        editSafeNeedId: '',
        deleteid: [],
        deleteids: [],
        value4: '',
        safeEditTreeData: [],
        safeEditprops: {
          label: 'name'
        },
        count: 1,
        cols: [
          { prop: 'name', label: '安全策略名称', width: '180px' },
          { prop: 'equips_name', label: '设备&测点' },
          { prop: 'times_raw', label: '安全时段', width: '330px' }
        ],
        safeTimeNeedShow: [],
        safeTimeShow: [],
        equipsShow: [],
        total: 0,
        ListQuery: {
          page: 2,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        enable,
        disable,
        deletes,
        remove,
        update,
        viewIcon,
        disableIcon,
        enableIcon,
        findInput: '',
        dialogSafeLook: false,
        dialogSafeEdit: false,
        formLabelWidth: '101px',
        formLabelWidth2: '50px',
        safeLookData: {
          name: '',
          equipment: '',
          safetime: [],
          status: ''
        },
        safeListNeed: [],
        needSafeName: '',
        // 安全时段总览请求内容
        safeOverviewBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'safetytime_get_condition',
          pid: this.$route.query.pid,
          data: {
            condition: {
              name: '',
              search: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        // 删除安全时段
        deleteSiteBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'del_safetytime',
          pid: this.$route.query.pid,
          ids: ''
        },
        // 修改安全时段
        editSiteBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'mod_safetytime',
          pid: this.$route.query.pid,
          data: {
            id: '',
            name: '',
            status: 1,
            equips: [],
            times: []
          }
        },
        // 查看安全时段
        lookSiteBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'get_safetytime_byid',
          pid: this.$route.query.pid,
          id: 5
        },
        // 启用安全时段
        safeEnable: {
          access_token: localStorage.getItem('access_token'),
          type: 'safetytime_enable',
          pid: this.$route.query.pid,
          ids: []
        },
        // 禁用安全时段
        safeDisable: {
          access_token: localStorage.getItem('access_token'),
          type: 'safetytime_disable',
          pid: this.$route.query.pid,
          ids: []
        },
        // 获取组织树
        safeEditTree: {
          access_token: localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: this.$route.query.pid,
          ids: ['']
        }
      }
    },
    mounted() {
      // this.getSafeList()
    },
    watch: {
      editSafeId(val) {
        this.$refs.tree.filter(val)
      }
    },
    methods: {
      toJSON() {
      },
      editFilterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      // 安全时段总览
      getSafeList() {
        axios.post('/safetytime', this.safeOverviewBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.safeListNeed = res.data.data.items
          for (let a = 0; a < res.data.data.items.length; a++) {
            this.safeListNeed[a].index = (a + 1) + (res.data.data.page.page_number - 1) * res.data.data.page.page_size
          }
          this.total = parseInt(res.data.data.page.total)
          this.ListQuery.page = 2
          const list = res.data.data.items
          for (const querylist in this.safeListNeed) {
            this.safeTimeNeedShow = []
            for (let i = 0; i < list[querylist].times.length; i++) {
              this.safeTimeNeedShow.push('时段' + [i + 1] + ':' + (this.safeListNeed[querylist].times[i].begin_time + '-' + this.safeListNeed[querylist].times[i].end_time))
            }
            this.safeTimeShow = this.safeTimeNeedShow
            this.safeListNeed[querylist].times_raw = this.safeTimeShow
          }
          for (let l = 0; l < this.safeListNeed.length; l++) {
            if (this.safeListNeed[l].status === 0) {
              this.safeListNeed[l].status = []
              this.safeListNeed[l].status.push('禁用')
              this.safeListNeed[l].status.push('0')
            } else {
              this.safeListNeed[l].status = []
              this.safeListNeed[l].status.push('启用')
              this.safeListNeed[l].status.push('1')
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      safeCurrentChange(val) {
        this.safeOverviewBody.data.page.page_number = (val) + ''
        this.getSafeList()
      },
      // 每页显示多少条
      safeSizeChange(pageSize) {
        //  this.safeOverviewBody.data.page.page_number = '1'
        this.safeOverviewBody.data.page.page_size = (pageSize) + ''
        this.getSafeList()
      },
      // 监听刷新列表
      addSafeName: function(siteId) {
        this.safeOverviewBody.data.condition.search = siteId
        this.safeOverviewBody.data.page.page_number = '1'
        this.getSafeList()
      },
      // 查看安全时段
      lookDialog(index, row) {
        this.lookSiteBody.id = row.id
        axios.post('/safetytime', this.lookSiteBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.lookSiteBody.id = ''
          this.safeLookData.name = ''
          this.safeLookData.status = ''
          this.safeLookData.safetime = []
          this.safeLookData.equipment = []
          this.safeLookData.name = res.data.datas.name
          this.safeLookData.status = res.data.datas.status
          if (this.safeLookData.status === 0) {
            this.safeLookData.status = '禁用'
          } else {
            this.safeLookData.status = '启用'
          }
          this.safeLookData.times_raw = []
          for (let i = 0; i < res.data.datas.times.length; i++) {
            this.safeLookData.safetime.push('时段' + [i + 1] + ':' + (res.data.datas.times[i].begin_time + '-' + res.data.datas.times[i].end_time + '  '))
          }
          this.safeLookData.equipment = res.data.datas.equips_name
        })
          .catch(function(error) {
            console.log(error)
          })
        this.dialogSafeLook = true
      },
      // 编辑安全时段
      editDialog(index, row) {
        this.lookSiteBody.id = row.id
        this.safeOverviewBody.data.condition.name = row.name
        axios.post('/project', this.safeEditTree, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.safeEditTreeData = []
          this.safeEditTreeData.push(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/safetytime', this.lookSiteBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.editSafeId = ''
          this.safeOverviewBody.data.condition.name = ''
          this.editSafeNeedId = res.data.datas.id
          this.editSafeName = res.data.datas.name
          this.$refs.tree.setCheckedKeys(res.data.datas.equips)
          this.editSiteBody.data.status = res.data.datas.status
          this.editSafeTime = []
          for (let i = 0; i < res.data.datas.times.length; i++) {
            this.editSafeTime.push({ value: [] })
            this.editSafeTime[i].value.push(res.data.datas.times[i].begin_time)
            this.editSafeTime[i].value.push(res.data.datas.times[i].end_time)
          }
        })
          .catch(function(error) {
            console.log(error)
          })
        this.dialogSafeEdit = true
      },
      // 增加时段
      editAddTime() {
        if (this.editSafeTime.length < 9) {
          this.editSafeTime.push({ value: '' })
        }
      },
      // 删除时段
      editDeleteRow(index) {
        if (this.editSafeTime.length > 1) {
          this.editSafeTime.splice(index, 1)
        }
      },
      editSafeCheckChange() {
        this.editSafeTree = this.$refs.tree.getCheckedKeys()
      },
      // 确认编辑
      editSafe() {
        this.editSiteBody.data.id = this.editSafeNeedId
        if (!this.editSafeName) {
          this.$message.error('请输入策略名称')
        } else if (this.editSafeName.length > 40) {
          this.$message.error('策略名称不可超过40个字段')
        } else {
          this.editSiteBody.data.name = this.editSafeName
          if (this.$refs.tree.getCheckedKeys().length === 0) {
            this.$message.error('请勾选测点树')
          } else {
            this.editSiteBody.data.equips = this.$refs.tree.getCheckedKeys()
            for (let x = 0; x < this.editSafeTime.length; x++) {
              if (!this.editSafeTime[x].value) {
                this.$message.error('第' + (x + 1) + '个时段未正常填写')
                return
              } else {
                if (this.editSiteBody.data.times.length < this.editSafeTime.length) {
                  this.editSiteBody.data.times.push({
                    begin_time: this.editSafeTime[x].value[0],
                    end_time: this.editSafeTime[x].value[1],
                    week: ['1']
                  })
                }
              }
            }
            axios.post('/safetytime', this.editSiteBody, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              this.getSafeList()
            })
              .catch(function(error) {
                console.log(error)
              })
            this.dialogSafeEdit = false
          }
        }
      },
      // 删除弹框
      deleteDialog(index, row) {
        this.deleteid.push(row.id)
        this.$confirm('确认删除策略？', '提示', {
          customClass: 'deleteDialog',
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.onlyDelete()
        }).catch(() => {
        })
      },
      // 单个删除操作
      onlyDelete() {
        this.deleteSiteBody.ids = this.deleteid
        axios.post('/safetytime', this.deleteSiteBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.deleteid = []
          this.deleteSiteBody.ids = ''
          this.safeOverviewBody.data.page.page_number = '1'
          this.getSafeList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取批量删除所需ID
      safeTimeChangeFun(val) {
        this.deleteids = []
        for (let d = 0; d < val.length; d++) {
          this.deleteids.push(val[d].id)
        }
      },
      // 启用
      showEnable(index, row) {
        this.dialogEnable = true
        this.safeEnable.ids = []
        this.safeEnable.ids.push(row.id)
      },
      enableWork() {
        axios.post('/safetytime', this.safeEnable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogEnable = false
          this.$message({
            type: 'success',
            message: '启用成功'
          })
          this.safeEnable.ids = []
          this.getSafeList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 禁用
      showDisable(index, row) {
        this.dialogVisible = true
        this.safeDisable.ids = []
        this.safeDisable.ids.push(row.id)
      },
      disableWork() {
        axios.post('/safetytime', this.safeDisable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '禁用成功'
          })
          this.safeDisable.ids = []
          this.getSafeList()
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.safe-containner{
  width: 100%;
  height:600px;
  overflow: auto;
  .safeSearch{
    width: 100%;
    height: 50px;
  }
  /deep/ .gutter {
    background: rgb(216, 222, 232);
  }
  .safeTableList{
    width: 100%;
    height: 500px;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__body {
    text-align: center;
    font-size: 18px;
    height: 180px;
    border-bottom: 1px solid #e8eaf1;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer {
    height: 60px;
  }
  /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer > .dialog-footer > button {
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
  }
  /deep/ .userCancel {
    border: 1px solid #526D89;
  }
  .footerPage{
    float: right;
    right:20px;
    position: relative;
  }
  .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
    color: #0072F3;
    margin-left: 0px;
  }
  .segmentingLine {
  font-size: 20px;
  }
  .gutter {
    background: rgb(216, 222, 232);
  }
  /deep/ .delete {
    display: inline;
    margin-left: 10px;
  }
  /deep/ .el-icon-delete{
    padding: 0;
    font-weight: 700;
    font-size: 20px;
    color: #d97159;
  }
  /deep/ .el-icon-delete:hover{
    color: #d97159;
  }
  /deep/ .el-icon-delete:focus{
    color: #d97159;
  }
  /deep/ .el-textarea__inner {
    resize: none;
  }
  /deep/ .el-dialog {
    border-radius: 5px;
  }
  /deep/ .el-dialog__header {
    background: #E3E6EE;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px 9px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    line-height: 20px;
  }
  /deep/ .el-dialog__headerbtn {
    top: 15px;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
  }
  /deep/ .el-table::before {
    height: 0px;
  }
  /deep/ .el-table .cell {
    white-space: pre-line;
  }
  /deep/ .relation {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
    color: #0072F3;
  }
  /deep/ .lookInput > .el-input__inner {
    height: 30px;
    border: none;
  }
  /deep/ .editInput > .el-input__inner {
    height: 30px;
    width: 100%;
  }
  /deep/ .editRow {
    height: 500px;
    border: 1px solid #E4E5E7;
  }
  /deep/ .el-textarea__inner {
    border: none;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ img {
    vertical-align: middle;
    margin-bottom: 3px;
  }
  /deep/ [class*=" el-icon-"], [class^=el-icon-] {
    font-weight: 700;
  }
  /deep/ .el-tree {
    background: #EAEDF1;
    padding: 10px;
  }
  /deep/ .dialogSafeEdit > .el-dialog > .el-dialog__body {
    padding: 0px;
  }
  /deep/ .dialogSafeEdit > .el-dialog > .el-dialog__footer {
    height: 50px;
  }
  /deep/ .el-dialog {
    width: 800px;
  }
  /deep/ .safeTimeTextarea > .el-textarea__inner {
    width: 375px;
    min-height: 75px;
  }
  /deep/ .editForm {
    padding: 10px 20px;
    margin: 0px;
  }
  /deep/ .editRowLeft {
    background: #EAEDF1;
    border: 1px solid #E4E5E7;
    height: 499px;
  }
  /deep/ .safeTimeTree {
    overflow: auto;
    height: 447px;
  }
  /deep/ .notes {
    float: left;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #69727E;
  }
  /deep/ #editAsterisk {
    color: #E53D41;
  }
  /deep/ .clears{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-left: 10px;
  }
  /deep/ .bottonConfirm {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .leftInput > .el-input__inner {
    height: 30px;
    margin:10px 20px;
    width: 220px;
  }
  .editSearch{
    position: absolute;
    margin-top: 18px;
    margin-left: -45px;
    cursor: pointer;
    color: #0072F3;
  }
  /deep/ .addEditIcon {
    color: #0072F3;
    font-size: 16px;
    cursor: pointer;
  }
  /deep/ .addSafeTable {
    height: 495px;
    overflow-y: auto;
  }
  /deep/ .addSafeTable > .el-table__header-wrapper{
    height: 0px;
  }
  /deep/ .addSafeTable > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table td, .el-table th{
    padding: 5px 0px;
  }
  /deep/ .el-icon-minus {
    color: #D05133;
  }
  /deep/ .block {
    height: 30px;
    line-height: 30px;
    float: right;
  }
  /deep/ .timeInterval {
    height: 30px;
    width: 365px;
    float: right;
  }
  #addNameSpan {
    float: left;
    margin: 20px 0px 0px 14px;
    color: #E53D41;
  }
  .addSafeSpan {
    float: left;
    margin: 6px 0px 0px 0px;
    color: #E53D41;
  }
  /deep/ .el-table td {
    padding: 3px 0px;
  }
  /deep/ .el-tag {
    background-color: transparent;
    border: none;
  }
  /deep/ .el-tag--success {
    background-color: transparent;
    color: #E53D41;
  }
  /deep/ .enableColor  > .el-input__inner {
    color: #0072F3;
  }
  /deep/ .disabledColor  > .el-input__inner {
    color: #E53D41;
  }
  /deep/ .el-message-box__message p {
    text-indent: 160px!important;
  }
}
</style>
